/* pages/water-world/water-world.less */
@import '../../app.less';

page {
    background: #fafafa;
    .container {
        padding-bottom: 30rpx;
        swiper {
            width : 100%;
            height: 360rpx;
            .swiper-pic {
                width : 100%;
                height: 360rpx;
            }
        }
        .live-area {
            width : 100%;
            padding : 20rpx 26rpx 0 26rpx;
            margin-bottom: 10rpx;
            .live-title {
                color : @main-color;
                font-size : 32rpx;
                line-height : 44rpx;
                font-weight : bold;
                margin-bottom: 16rpx;
            }
            .live-box {
                width : 100%;
                height : 248rpx;
                padding : 24rpx 16rpx;
                background : #ffffff;
                border-radius: 16rpx;
                box-shadow : 0px 4px 8px 0px rgba(232, 232, 232, 0.5);
                .live-pic {
                    width : 300rpx;
                    height : 200rpx;
                    border-radius: 8rpx;
                    margin-right : 16rpx;
                }
                .live-detail-title {
                    .twoline();
                    color : @main-color;
                    font-size: 32rpx;
                    line-height: 44rpx;
                }
                .live-author {
                    color: @minor-color;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    margin: 10rpx 0 35rpx;
                }
                .live-time {
                    color: @main-color;
                    font-size: 24rpx;
                    line-height:34rpx;
                }
            }
        }
        .water-knowledge-area {
            width : 100%;
            padding: 0 14rpx;
            margin : 20rpx 0;
            .knowledge-title {
                .title-left {
                    color : @main-color;
                    font-size : 32rpx;
                    line-height: 44rpx;
                }
            
                .title-right {
                    color: @minor-color;
                    font-size  : 24rpx;
                    line-height: 34rpx;
                    .arrow-right {
                        .arrow();
                        border-top  : 2rpx solid @minor-color;
                        border-right: 2rpx solid @minor-color;
                        margin : 0 10rpx;
                    }
                }
            }
            .knowledge-item {
                padding : 20rpx 20rpx 15rpx;
                background: #ffffff;
                margin : 10rpx 0;
                .knowledge-info{
                    width:660rpx;
                    .knowledge-item-title {
                        .oneline();
                        color: @main-color;
                        font-size : 28rpx;
                        line-height : 40rpx;
                        margin-bottom: 4rpx;
                    }
                    .knowledge-detail {
                        color: @minor-color;
                        font-size : 24rpx;
                        line-height: 34rpx;
                        .knowledge-author {
                            margin-right: 20rpx;
                        }
                    }
                }
                .arrow-right {
                    .arrow();
                    border-top: 2rpx solid @main-color;
                    border-right: 2rpx solid @main-color;
                }
            }

        }
        .swiper-knowledge{
            width:100%;
            padding:20rpx 4rpx;
            white-space: nowrap;
            .swiper-knowledge-item{
                display:inline-block;
                width:632rpx;
                // height:580rpx;
                background:#ffffff;
                border-radius:16rpx;
                margin:0 10rpx;
                vertical-align: top;
                .swiper-knowledge-pic{
                    width:632rpx;
                    height:200rpx;
                    border-radius:16rpx 16rpx 0 0;
                }
                .swiper-knowledge-box{
                    padding:0 20rpx;
                    .swiper-knowledge-detail{
                        height:100rpx;
                        line-height:100rpx;
                        
                        .swiper-knowledge-detail-text{
                            .oneline();
                            width:440rpx;
                            color:@main-color;
                            font-size:28rpx;
                            line-height:40rpx;
                        }
                        .swiper-knowledge-detail-avatar{
                            width:60rpx;
                            height:60rpx;
                            border-radius:50%;
                            margin-right:16rpx;
                        }
                        .swiper-knowledge-detail-name{
                            color:@main-color;
                            font-size:24rpx;
                            line-height:34rpx;
                        }
                        &.swiper-knowledge-detail{
                            border-top:solid 2rpx #e5e5e5;
                        }
                    }
                    .check-more{
                        color:#333333;
                        font-size:24rpx;
                        line-height:80rpx;
                        text-align:center;
                    }
                }
                
            }
        }
        .increase-knowledge{
            width:100%;
            padding:0 14rpx;
            .knowledge-title {
                margin-bottom:10rpx;
                .title-left {
                    color : @main-color;
                    font-size : 32rpx;
                    line-height: 44rpx;
                }
            
                .title-right {
                    color: @minor-color;
                    font-size  : 24rpx;
                    line-height: 34rpx;
                    .arrow-right {
                        .arrow();
                        border-top  : 2rpx solid @minor-color;
                        border-right: 2rpx solid @minor-color;
                        margin : 0 10rpx;
                    }
                }
            }
            .increase-item{
                padding:10rpx 20rpx;
                background:#ffffff;
                border-radius:6rpx;
                .increase-pic{
                    width:160rpx;
                    height:160rpx;
                    border-radius:8rpx;
                    margin-right:15rpx;
                }
                .increase-detail{
                    width:505rpx;
                    .increase-title{
                        .oneline();
                        color:@main-color;
                        font-size:32rpx;
                        line-height:44rpx;
                    }
                    .increase-desc{
                        .twoline();
                        color:@main-color;
                        font-size:24rpx;
                        line-height:34rpx;
                        margin:4rpx 0;
                    }
                    .increase-author{
                        color:@minor-color;
                        font-size:24rpx;
                        line-height:34rpx;
                        text{
                            margin-left:10rpx;
                        }
                    }
                }
                
            }
        }
    }
}







